<template>
  <div class="welcome main-body">
    <div v-for="(item,index) in topList" :key="index" class="welcome-top clearfix">
      <div class="top left">
        <img :src="item.ranking" alt="">
      </div>
      <div class="brand left">
        <img :src="item.brand" alt="">
      </div>
      <div class="brand-introduce left">
        <h4>{{ item.name }}</h4>
        <p>{{ item.introduce }}</p>
      </div>
      <button class="right">查看详情</button>
    </div>
    <button class="Nbtn">查看更多</button>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  data() {
    return {
      topList: [
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_first.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_scond.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_third.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_first.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_scond.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_third.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_first.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_scond.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_third.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        },
        {
          ranking: require('../../../../assets/img/template-item2/icons/bangdan_icon_first.png'),
          brand: require('../../../../assets/img/template-item2/brands/2.png'),
          name: '三菱电动车',
          introduce: '专业制造100年，追求卓越，止于至善'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../../assets/template-item2/css/base';
.welcome{
  @include btn;
  .Nbtn{
    margin: 60px auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .welcome-top{
    height: 184px;
    width: 1200px;
    padding: 0px 60px;
    display: flex;
    align-items: center;
    position: relative;
    button{
      position: absolute;
      left: 100%;
      transform: translate(-150%, 0%)
    }
    .top{
      width: 37px;
      height: 55px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .brand{
      width: 198px;
      height: 112px;
      margin-left: 62px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      img{
        width: 154px;
        height: 90px;
      }
    }
    .brand-introduce{
      margin-left: 10px;
      h4{
        font-size:22px;
        font-weight:bold;
        line-height:29px;
      }
      p{
        font-size:16px;
        font-weight:400;
        line-height:21px;
        color:#787878;
        margin-top: 20px;
      }
    }
    &:hover{
      box-shadow: 3px 3px 3px 3px #E7E7E7;
    }
  }

}
</style>

